<template>


  <div>

    <!--  查询-->
    <el-card>

      <el-form inline label-width="90px" size="mini" class="demo-form-inline">

        <el-form-item label="名称">
          <el-input placeholder="请输入名称" v-model.trim="queryParam.name" clearable size="mini"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="queryParam.fileOrDir" placeholder="请选择" clearable>
            <el-option :key="1" label="文件" :value="1" />
            <el-option :key="2" label="目录" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="路径">
          <el-input placeholder="请输入路径" v-model.trim="queryParam.path" clearable size="mini"></el-input>
        </el-form-item>
        <el-form-item label="重要性">
          <el-select v-model="queryParam.core" placeholder="请选择" clearable>
            <el-option :key="1" label="高" :value="1" />
            <el-option :key="2" label="中" :value="2" />
            <el-option :key="3" label="低" :value="3" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="mini" @click="getListPage">查询</el-button>
          <el-button type="warning" size="mini" @click="resetQuery">重置</el-button>
          <el-button type="warning" size="mini" @click="openSaveBefore">新增</el-button>
        </el-form-item>

      </el-form>

    </el-card>





    <!--列表-->
    <el-card style="margin-top: 10px">

      <el-table
          :data="tableData"
          max-height="450px"
          height="450px"
          style="width: 100%">

        <el-table-column prop="core" label="重要性" width="80">
          <template slot-scope="scope">
            <el-tag type="danger" size="mini" v-if="scope.row.core === 1">高</el-tag>
            <el-tag type="warning" size="mini" v-else-if="scope.row.core === 2">中</el-tag>
            <el-tag size="mini" v-else-if="scope.row.core === 3">低</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="name" label="名称">
          <template slot-scope="scope">
            <span>
              <el-image class="file-dir-icon" v-if="scope.row.fileOrDir === 1" fit="contain" :src="require('@/assets/images/os/file.png')"/>
              <el-image class="file-dir-icon" v-else-if="scope.row.fileOrDir === 2" fit="contain" :src="require('@/assets/images/os/dir.png')"/>
            </span>
            <span>{{scope.row.name}}</span>
          </template>
        </el-table-column>

        <el-table-column prop="path" label="路径"/>

        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="openViewBefore(scope.row)" type="text" size="small"><i class="el-icon-view"></i>查看</el-button>
            <el-button @click="openUpdBefore(scope.row)" type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
            <el-button @click="delTips(scope.row)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
          </template>
        </el-table-column>

      </el-table>


      <!--分页部分-->
      <el-pagination
          style="width:33%; margin-right:10px; margin-top:10px;"
          background
          layout="total, prev, pager, next, jumper"
          @current-change="pageCurrentChange"
          :page-size="pageConfig.size"
          :current-page="pageConfig.current"
          :pager-count="5"
          :total="pageConfig.total">
      </el-pagination>

    </el-card>

    <OpsComputerFileSaveUpd  ref="OpsComputerFileSaveUpdRef" @getListPage="getListPage"/>
    <OpsComputerFileDetailed ref="OpsComputerFileDetailedRef"/>

  </div>

</template>


<script>

import http from '@/utils/http'
import OpsComputerFileSaveUpd  from './OpsComputerFileSaveUpd.vue'
import OpsComputerFileDetailed from './OpsComputerFileDetailed.vue'


export default {
  name: "OpsComputerFileList",
  components: {
    OpsComputerFileSaveUpd,
    OpsComputerFileDetailed,
  },
  data() {
    return {
      // 查询参数
      queryParam: {
        siteId: null,
        computerServerId: null,
        fileOrDir: null,
        name: null,
        path: null,
        core: null,
        description: null,
      },
      // 分页参数
      pageConfig: {
        // 每页记录数
        size: 20,
        // 当前页码
        current: 1,
        // 总记录数
        total: 0,
      },
      // 表格数据
      tableData: [],
    }
  },
  methods: {
    /**
     * 打开保存的弹框
     */
    openSaveBefore() {
      this.$refs.OpsComputerFileSaveUpdRef.init(this.queryParam.computerServerId, 'save', null)
    },
    /**
     * 查看之前触发
     * @param obj 这一行数据
     */
    openViewBefore(obj){
      this.$refs.OpsComputerFileDetailedRef.init(obj)
    },
    /**
     * 打开修改之前的的弹出框
     * @param obj 修改的值
     */
    openUpdBefore(obj) {
      this.$refs.OpsComputerFileSaveUpdRef.init(null, 'upd', obj)
    },
    /**
     * 删除之前的提示框
     * @param obj 要删除的数据
     */
    delTips(obj) {
      this.$confirm('是否执行删除, 删除后无法恢复，是否继续?', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消删除',
        type: 'warning'
      }).then(() => {
        // 确定删除
        this.delOpsComputerFile(obj)

      }).catch(() => {
        // 取消删除
      });
    },
    /**
     * 删除
     * @param obj 要删除的数据
     */
    delOpsComputerFile(obj) {
      http.post("opsComputerFile/delOpsComputerFile", {
        id: obj.id,
      }).then(response => {
        let res = response.data;
        this.getListPage()
        this.$message.success("删除成功");

      }).catch(error => {
        this.$message.error (error.message)
      })
    },
    /**
     * 分支分页查询列表
     */
    getListPage() {
      this.queryParam.current = this.pageConfig.current
      this.queryParam.size = this.pageConfig.size
      http.post("/opsComputerFile/getListPage", this.queryParam).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        this.pageConfig.total = data.total;
        this.pageConfig.current = data.current;
        this.pageConfig.size = data.size;
        // 表格数据
        this.tableData = data.records

      }).catch(error => {
        this.$message.error (error.message);
      })
    },
    /**
     * 分页被改变的时候
     * @param value 当前页
     */
    pageCurrentChange(value) {
      this.pageConfig.current = value
      this.getListPage()
    },
     /**
     * 重置查询条件
     */
    resetQuery() {
      this.queryParam = {
        id: null,
        siteId: null,
        computerServerId: null,
        fileOrDir: null,
        name: null,
        path: null,
        core: null,
        description: null,
        createTime: null,
        updateTime: null,
        updateId: null,
        createId: null,
        delType: null,
      }
    },
     /**
     * 分页前重置分页参数
     */
    getPageListBefore() {
      this.pageConfig.current = 1
      this.getListPage()
    },
    /**
     * 外部调用初始化
     * @param computerServerId 计算机id
     */
    openInit(computerServerId){
      this.queryParam.computerServerId = computerServerId
      this.getListPage()
    },
  },
  // 进入马上执行
  mounted() {
    // this.getListPage()

    // this.$store.commit('navigationListChange', [
    //   {name: '场所列表', url: '/toSiteList', query: {}},
    //   {name: '场所详情', url: '/toSiteLayout', query: {siteId: this.$route.query.siteId}},
    //   {name: '计算机管理', url: '/toComputerServerList', query: {siteId: this.$route.query.siteId}},
    //   {name: '关键文件与文件夹', url: '/toOpsComputerFileList', query: {}},
    // ])
  },
}
</script>

<style scoped>

.file-dir-icon{
  width: 20px;
  height: 18px;
  vertical-align: middle;
  margin-right: 5px;
}

</style>

